<div class="wrapper-bz-body">
    <div class="column-block block-left" style="width:350px;">
        <div class="column-title">用户</div>
        <div class="column-content">
            <div class="column-filter">
                <div class="common-search-box">
                    <input style="width:250px"  id="search_input_user_in_m68" />
                </div>
            </div>
            <div class="column-datagrid">
                <table id="table_user_in_m68" style="width:100%;height:100%"></table>
            </div>
        </div>
    </div>
    <div class="column-block block-right" style="left:360px;">
        <div class="column-title">所选用户</div>
        <div class="column-content">
            <div id="list_select_user_in_m68"></div>
            <form id="form_join_clockin_activity_in_m68" enctype="multipart/form-data" method="post" action="#" class="form hide">
            </form>
        </div>
    </div>
</div>

<script>
    $(function(){
        var formId_1 = "form_join_clockin_activity_in_m68";
        var searchInputId_1 = "search_input_user_in_m68";
        var tableId_1 = "table_user_in_m68";
        var tableObject_1 = $("#" + tableId_1);
        var arrSelectUser = [];
        var arrSelectUserCode = [];
        var configDatagrid_1 = {
            url:'/api/User/getUserList',
            method: 'post',
            remoteSort:false,
            queryParams:{},
            pageList:[25,50,100],
            pageSize:25,
            pagination:true,
            clickToEdit:false,
            dblclickToEdit:false,
            singleSelect:true,
            checkOnSelect:true,
            selectOnCheck:true,
            rownumbers:false,
            striped:true,
            fitColumns:true,
            fit:true,
            frozenColumns:[[
                {field:'ck',title:'ck',checkbox:true},
            ]],
            columns:[[
                {field:'user_code',title:'ID',width:40,hidden:true},
                {field:'nickname',title:'昵称',width:100},
                {field:'real_name',title:'真实姓名',width:250},
            ]],
            loadFilter: function(data){
                return loadFilter(data, true);
            },
            onClickRow: function(index, row){
                console.log("row info:", row);
                console.log("select user:", arrSelectUserCode);
                console.log(arrSelectUserCode.indexOf(row.user_code));
                if(-1 == arrSelectUserCode.indexOf(row.user_code)){
                    arrSelectUser.push(row);
                    arrSelectUserCode.push(row.user_code);
                }
                displaySelectUser(arrSelectUser);
                fillJoinForm(arrSelectUser);
            },
            onCheck: function(index, row){
            },
            onUncheck: function(index, row){
            },
            onLoadSuccess: function(){
            },
            toolbar:[
                {
                    text:'<span class="tool-btn-refresh"><i class="fa fa-refresh"></i>刷新</span>',
                    plain:true,
                    handler:function(){
                        tableObject_1.datagrid('reload');
                    }
                }
            ]

        };
        tableObject_1.datagrid(configDatagrid_1);
        SearchCombobox(searchInputId_1, tableId_1,function (val,name) {
            configDatagrid_1.queryParams = {};
            configDatagrid_1.queryParams[name] = val;
            tableObject_1.datagrid(configDatagrid_1);
        },['ck','ID']);

        function displaySelectUser(arrSelectUser)
        {
            var html = "";
            $.each(arrSelectUser, function(index, item){
                html += "<div class='item-select-user' userCode='" + item.user_code +"'><span>" + item.nickname + "</span><i class='fa fa-remove'></i></div>";
            });
            $("#list_select_user_in_m68").html(html);
        }

        function fillJoinForm(arrSelectUser)
        {
            var html = "";
            $.each(arrSelectUser, function(index, item){
                html += "<input name='arr_user_code[]' value='" + item.user_code + "' />";
            });
            $("#form_join_clockin_activity_in_m68").html(html);
        }

        $(document).on("click", ".fa-remove", function(){
            var curItem = $(this);
            var parentItem = curItem.parent(".item-select-user");
            var removeUserCode = parentItem.attr("userCode");
            parentItem.remove();
            arrSelectUserCode = [];
            $.each(arrSelectUser, function(index, item){
                if(item.user_code == removeUserCode){
                    arrSelectUser.splice(index, 1);
                }else{
                    arrSelectUserCode.push(item.user_code);
                }
            });
            fillJoinForm(arrSelectUser);
        })
    });
</script>